<template>
  <div class="charge_container">
    <div class="chargeSubmit" v-if="!doneCharge">
      <h2>充值金额</h2>
      <el-radio-group class="radio" v-model="radio">
        <el-radio class="el-radio-item" :label="10">购买10Collect币 ¥10元人民币</el-radio>
        <el-radio class="el-radio-item" :label="100">购买100Collect币 ¥100元人民币</el-radio>
        <el-radio class="el-radio-item" :label="500">购买500Collect币 ¥500元人民币</el-radio>
        <el-radio class="el-radio-item" :label="1000">购买1000Collect币 ¥1000元人民币</el-radio>
        <el-radio class="el-radio-item" :label="5000">购买5000Collect币 ¥5000元人民币</el-radio>
        <el-radio class="el-radio-item" :label="10000">购买10000Collect币 ¥10000元人民币</el-radio>
        <br>
        <br>
        <el-radio class="el-radio-item" :label="0">购买
          <span>
            <el-input v-model="amount"></el-input>
          </span>
          Collect币 ¥{{ amount }}元人民币
        </el-radio>
      </el-radio-group>
      <el-button class="charge_btn" @click="submitCharge">提交</el-button>
      <h4>充值说明</h4>
      <p>1.每1元人民币=1Collect币，上不封顶</p>
      <p>2.支付成功后，可以在右上角查看自己的余额。也可以在个人信息页面查看余额和账户交易明细</p>
      <p>3.Collect币充值后不支持退款，请您慎重选择充值金额</p>
      <p>4.如遇充值高峰，到账可能延迟，请耐心等待，请勿重复充值。如充值后超过2小时未到账，请联系客服</p>
    </div>
    <div class="chargeResult" v-if="doneCharge">
      <img v-if="chargeSuccess" src="../../assets/image/charge_success.png" alt="" style="width: 150px">
      <img v-if="!chargeSuccess" src="../../assets/image/charge_fail.png" alt="" style="">
    </div>
  </div>
</template>

<script>
import {balanceRecharge} from "@/api/boss";
export default {
  name: "Usercharge",
  data(){
    return{
      radio:10,
      amount:"",
      doneCharge:false,
      chargeSuccess:false,
    }
  },
  methods:{
    submitCharge(){
      if(this.radio!==0){
        this.amount=this.radio
      }
      this.$confirm('确定充值吗？', '提示', {
        confirmButtonText: '充值',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(this.radio===0){
          if(isNaN(this.amount) || this.amount<=0){
            //检查：必须为正数
            this.$message.error('充值金额应为正数，请重新输入');
            return;
          }
        }
        //alert("amount:"+this.amount)
        this.doneCharge=true;
        //todo 点击提交按钮之后，应当充值。成功则设置this.chargeSuccess为true，反之为false
        balanceRecharge({userId:sessionStorage.getItem('userid'),amount:this.amount}).then(res=>{
          console.log(res)
          if(res.code === 200){
            this.chargeSuccess = true;
          }
          else{
            this.chargeSuccess = false;
            throw new Error(res.msg);
          }
        })
        setTimeout(()=>{
          this.statusRecovery();
        },5000);


      }).catch(err =>{
        this.$message.error(err.message);
      })
    },
    statusRecovery(){
      this.doneCharge = false;
      this.chargeSuccess = false;
    }
  }
}
</script>

<style scoped>
.charge_container{
  border: 1px solid #DCDFE6;
  width: 90%;
  margin: 5% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  /*box-shadow: 0 0 8px #909399;*/

  background-color: #FFFFFF;
}
.chargeSubmit{
  text-align: left;
  margin-right: 20px;
  margin-bottom: 40px;
}
h2{
  text-align: left;
  margin-bottom: 20px;
}
p{
  text-align: left;
  margin-left:40px;
}
.radio{
  margin-left:20px;
}
.el-radio-item{
  width:240px;
  margin-bottom: 10px;
}
.charge_btn{
  margin-top: 20px;
  margin-left: 270px;
  margin-bottom: 40px;
  color: #fff;
  background-color: #AB0427;
  border-color: #AB0427;
}
.charge_btn:hover{
  color: #AB0427;
  background-color: #F1F1F1;
  border-color: #AB0427;
}
h4{
  text-align: left;
  margin-left: 20px;
  margin-bottom: 10px;
}
.chargeResult{
  text-align: center;
}
img{
  width:500px;
}
</style>